import {useState, forwardRef, useImperativeHandle} from 'react';
import {Form, Button, Row, Col,} from 'antd';
import {changFormAdvancedSearch} from '@/store/userSlice';
import {useDispatch} from 'react-redux';

import CycleForm from './CycleForm.tsx'
// 搜索表单组件
const DynamicSearchForm = forwardRef(({
                                          fields = {},
                                          onSearch,
                                          initialValues = {},
                                          colLayout = {xs: 24, sm: 12, md: 8, lg: 6, xl: 6},
                                      },ref) => {
    const dispatch = useDispatch()
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [showExpand, setShowExpand] = useState(false);
    // 暴露修改方法给父组件
    useImperativeHandle(ref, () => ({
        // 更新部分表单数据
        updateFormData: ({key,val}) => {
            form.setFieldValue(key, val)
        },
        getFormData: () => {
            return form.getFieldsValue()
        }
    }));
    // 处理表单提交
    const handleSearch = async () => {
        try {
            setLoading(true);
            const values = await form.validateFields();
            onSearch(values);
        } catch (error) {
            console.error('表单验证失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 重置表单
    const handleReset = () => {
        form.resetFields();
        onSearch(initialValues);
    };
    // 高级搜索
    const advancedSearch = () => {
        const value = !showExpand
        setShowExpand(value);
        dispatch(changFormAdvancedSearch(value))
    }
    return (
        <Form
            form={form}
            layout="horizontal"
            initialValues={initialValues}
            autoComplete="off"
            labelCol={{span: 8}}
            wrapperCol={{span: 16}}
            style={{background: '#F4FBFB', padding: '20px 0 10px 0', marginBottom: '24px'}}
            className="search-forms"
        >
            <Row>
                <Col span={19}>
                    <Row>
                        <CycleForm fields={fields.search} form={form}/>
                    </Row>
                    {!showExpand ? null :
                        <Row>
                            <CycleForm fields={fields.expand} form={form}/>
                        </Row>
                    }
                </Col>
                <Col style={{textAlign: 'right', display: 'flex', justifyContent: 'center'}} span={5}>
                    <Button color="cyan" variant="link" onClick={advancedSearch}>高级搜索</Button>
                    <Button
                        type="primary"
                        onClick={handleSearch}
                        loading={loading}
                        style={{marginRight: 8}}
                    >
                        查询
                    </Button>
                    <Button
                        onClick={handleReset}
                    >
                        重置
                    </Button>
                </Col>
            </Row>
        </Form>
    );
})

export default DynamicSearchForm;